<template>
  <div id="model_app">
    <el-dialog title="新增" :visible.sync="showFlag1.status">
      <el-form ref="from" :model="form" label-width="60px" :rules="rules">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="1">目录</el-radio>
            <el-radio label="2">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上级" v-if="form.type == 2">
          <el-select v-model="form.pid" placeholder="请选择活动区域">
            <el-option label="顶级菜单" value="0"></el-option>
            <el-option label="系统设置" value="1"></el-option>
            <el-option label="商城管理" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="名称" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" v-if="form.type == 1">
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" v-if="form.type == 2">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["showFlag1"],
  created() {
    console.log(this.showFlag1, "hello");
  },
  data() {
    return {
      dialogTableVisible: true,
      dialogFormVisible: true,
      form: {
        pid: 0,
        title: "",
        icon: "",
        type: 1,
        url: "",
        status: "",
      },

      rules: {
        type: {
          required: true,
          message: "用户名不可为空",
          trigger: "blur",
        },
        title: {
          required: true,
          message: "密码不可为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "密码不可为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    submitMenu() {
      this.$refs["from"].validate((valid) => {
        if (valid) {
          // this.showFlag.status = false;
          this.$http
            .post("http://127.0.0.1:3000/api/menuadd", this.form)
            .then((res) => {
              if (res.status == 200) {
                // 清空数据
                this.form = {
                  pid: "",
                  title: "",
                  icon: "",
                  type: 1,
                  url: "",
                  status: "",
                };
                //关闭模态框
                this.showFlag1.status = false
                this.$emit("updataMenu");
              }
            });
        }
      });
    },
  },
};
</script>

<style>
</style>